<template>
  <div class="warp">
    <div flex="main:justify" 
      style="display:flex; justify-content:space-between; "
    >
      <div flex="cross:center" 
        style="display:flex; align-items:center; "
      >
        精华答疑
        <span class="icon-icon-test Qicon iconfont"></span>
      </div>
      <!-- <el-input class="input"></el-input> -->
      <div flex="main:left" 
        style="display:flex; justify-content:flex-start; "
      >
        <p
          class="QAselect"
          :class="activeIndex === 0 ? 'active' : ''"
          @click="changeTab(0)"
        >
          最新回复
        </p>
        <p
          class="QAselect"
          :class="activeIndex === 1 ? 'active' : ''"
          @click="changeTab(1)"
        >
          最新提问
        </p>
      </div>
    </div>
    <QAItem v-for="(item, index) in QAList" :class="index===(QAList.length-1)?'':'border'" :QAItem="item" :key="index"></QAItem>
       <el-pagination
      class="pagination"
      @current-change="getMyQAList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-empty v-if="QAList.length <= 0"></el-empty>
  </div>
</template>

<script lang="ts">
import QAItem from "/@/components/qaItem.vue";
import { myqa } from "/@/api/qaApi";
export default {
  components: {
    QAItem,
  },
  data() {
    return {
      activeIndex: 0,
      QAList: [],
      total: 0,
      pageSize: 20,
    };
  },
  mounted() {
    this.getMyQAList();
  },
  methods: {
    changeTab(index) {
        this.activeIndex = index

    },
    getMyQAList(page = 1, params = {}) {
      let offset = (page - 1) * this.pageSize;
      myqa({
        offset: offset,
        size: this.pageSize,
        ...params,
      })
      .then((res) => {
        const { questionInfos, total } = res;
        this.QAList = questionInfos||[];
    
        this.total = total;
      })
      .catch((err) => {
        console.error(err);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.border{
   border-bottom: 1px solid #ffefe8;
}
.warp {
  padding-top: 20px!important;
}
.QAselect {
  font-size: 16px;
  height: 24px;
  border-radius: 12px;
  width: 90px;
  text-align: center;
  color: #ec620d;
  background-color: #ffffff;
  border: 1px solid #ec620d;
  margin-left: 20px;
  cursor: pointer;
}
.active {
  background: #ec620d;
  color: #ffffff;
}
.Qicon {
  font-size: 28px;
  color: #e85900;
  margin-left: 10px;
}
.input {
  width: 30%;
}
</style>